Description

Switch MediaBlock from viewport-based breakpoints (md:, lg:) to CSS container query breakpoints (@sm:, @lg:) so responsive image sizing adapts to the parent container width instead of the viewport. This fixes incorrect sizing when MediaBlock is embedded in narrower containers like the blog post layout (max-w-[48rem]).

Also updates InlineMediaBlock sizes attribute to use conservative container-relative pixel estimates instead of viewport-relative vw units.

Related Issues

Closes #757

Key Changes

• src/blocks/Media/Component.tsx:

  • Added @container class to the wrapper div so child elements can use container query breakpoints
  • Changed responsive max-w-* classes from viewport breakpoints (md:max-w-sm, lg:max-w-md) to container query breakpoints (@sm:max-w-sm, @lg:max-w-md)
  • Updated sizes attribute to use 640px (the sm breakpoint) as the threshold instead of 768px (md), providing more conservative estimates
  • Removed unused cssVariables import

• src/blocks/InlineMedia/Component.tsx:

  • Replaced ${resolvedSize}vw sizes hints (e.g. "25vw", "50vw") with container-aware pixel estimates (e.g. "(max-width: 640px) 25vw, 192px")
  • Added a sizesForWidth lookup map with descriptive comments

How to test

1. Navigate to a blog post that contains a MediaBlock (e.g. at nwac.localhost:3000/blog/...)
2. The post content area has a max-w-[48rem] constraint
3. Verify that media blocks at small, medium, and large sizes visually adapt to the container width rather than the viewport width
4. Resize the browser — the image size transitions should respond to the container, not the viewport
5. Test inline media blocks in richText content similarly
6. Verify full-width pages (non-blog layout) still render MediaBlocks correctly

🤖 Generated with Claude Code